@charset "UTF-8";
.btn {
  margin: 8px auto;
  width: 160px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.background-after::after {
  content: "";
  position: absolute;
  inset: 0;
}

.background-before::before {
  content: "";
  position: absolute;
  inset: 0;
}

.rect {
  background: #f6ed8d;
}

.circle {
  border-radius: 64px;
  background: #7de3c8;
}

.parallelogram::before {
  background: #03f463;
  transform: skewX(15deg);
  z-index: -1;
}

.trapezoid::after {
  background: #ff9800;
  /**
    perspective 改变视角
      1 和元素高度有关系，如果值和元素高度保持一致，则看起来不会有变化
      2 和rotate有关系, 必须要在rotate之前
  */
  transform: perspective(40px) rotateX(10deg);
  transform-origin: bottom;
  z-index: -1;
}

.notching {
  margin: 8px;
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  background-image: url(../../assets/08-.jpg);
  background-size: 50% 50%;
  background-repeat: no-repeat;
}
.notching.notching1 {
  /**
    background-size对background-image起作用, 对background-color不起作用
    background-position 对background-image起作用, 对background-color不起作用
    top left 左上角开始
    top right 右上角开始
    bottom left 左下角开始
    bottom right 右下角开始
  */
  background-image: linear-gradient(135deg, transparent 10px, #ff1493 0), linear-gradient(-135deg, transparent 10px, green 0), linear-gradient(-45deg, transparent 10px, yellow 0), linear-gradient(45deg, transparent 10px, blue 0);
  background-position-x: left, right, right, left;
  background-position-y: top, top, bottom, bottom;
  /**
     to top、to bottom、to left 和 to right 分别等价于 0deg、180deg、270deg 和 90deg
     三个关键
     1 反向 default是 to bottom
     2 每段所占 百分比
     3 每段过渡的位置

     linear-gradient(red 10%, 30%, blue 90%); 
        起始点到 10% 是纯红色，90% 到结束点是纯蓝色。10% 和 90% 之间是颜色从红色过渡到蓝色的地方，但是，过渡的中点是 30% 的位置，默认是50%
  */
}
.notching.notching2 {
  background-image: linear-gradient(#ff1493), linear-gradient(green), linear-gradient(yellow), linear-gradient(blue);
  background-position-x: left, right, right, left;
  background-position-y: top, top, bottom, bottom;
}
.notching.clip-notching {
  background-image: linear-gradient(45deg, #f9d9e7, #ff1493);
  background-size: 100% 100%;
  /**
   8个点位连接起来从 左上 开始，第一个代表 x轴方向的偏移量，第二个代表 y轴方向的偏移量
  */
  clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px), 0 15px);
}

.arrow {
  width: 100px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(-135deg, transparent 20px, #04e6fb 20px, #65ff9a 100%), linear-gradient(-45deg, transparent 20px, #04e6fb 20px, #65ff9a 100%);
  background-position-x: right, right;
  background-position-y: top, bottom;
  background-repeat: no-repeat;
  background-size: 100% 50%;
}
.arrow.clip-arrow {
  background-image: linear-gradient(45deg, #04e6fb, #65ff9a);
  background-size: 100% 100%;
  clip-path: polygon(0 0, 30px 50%, 0 100%, calc(100% - 30px) 100%, 100% 50%, calc(100% - 30px) 0);
}

.inset-circle {
  margin: 8px;
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  /**
   起点是左下角（100% 100%）
   方向是-45deg, 已弧形扩散
   0 到 半径 12px 是透明的
   半径50px之后都是蓝色
   半径12到50是渐变的
  */
  background-image: radial-gradient(circle at 100% 100%, transparent 0, transparent 12px, #2179f5 50px);
}
.inset-circle.inset-circle2 {
  background-image: radial-gradient(circle at 100% 100%, transparent 0, transparent 12px, #2179f5 13px), radial-gradient(circle at 0 0, transparent 0, transparent 12px, #2179f5 13px), radial-gradient(circle at 100% 0, transparent 0, transparent 12px, #2179f5 13px), radial-gradient(circle at 0 100%, transparent 0, transparent 12px, #2179f5 13px);
  background-repeat: no-repeat;
  background-position: right bottom, left top, right top, left bottom;
  background-size: 70% 70%;
}
.inset-circle.mark {
  background-image: linear-gradient(45deg, #2179f5, #e91e63);
  -webkit-mask-image: radial-gradient(circle at 100% 100%, transparent 0, transparent 12px, #2179f5 13px), radial-gradient(circle at 0 0, transparent 0, transparent 12px, #2179f5 13px), radial-gradient(circle at 100% 0, transparent 0, transparent 12px, #2179f5 13px), radial-gradient(circle at 0 100%, transparent 0, transparent 12px, #2179f5 13px);
          mask-image: radial-gradient(circle at 100% 100%, transparent 0, transparent 12px, #2179f5 13px), radial-gradient(circle at 0 0, transparent 0, transparent 12px, #2179f5 13px), radial-gradient(circle at 100% 0, transparent 0, transparent 12px, #2179f5 13px), radial-gradient(circle at 0 100%, transparent 0, transparent 12px, #2179f5 13px);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: right bottom, left top, right top, left bottom;
          mask-position: right bottom, left top, right top, left bottom;
  -webkit-mask-size: 70% 70%;
          mask-size: 70% 70%;
}

.skew {
  position: relative;
  width: 120px;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 8px auto;
  padding-left: 13px;
  box-sizing: border-box;
}
.skew::before {
  content: "";
  position: absolute;
  background: orange;
  top: 0;
  right: -13px;
  width: 100px;
  height: 100%;
  border-radius: 10px;
  z-index: -1;
}
.skew::after {
  border-radius: 10px;
  background: orange;
  transform: skewX(15deg);
  z-index: -1;
}

.outside-circle {
  margin: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 64px;
  background-color: #ff1493;
  border-radius: 10px 10px 0 0;
  position: relative;
}
.outside-circle::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  left: -20px;
  bottom: 0;
  background-image: radial-gradient(circle at 0% 0%, transparent 20px, #ff1493 21px);
}
.outside-circle::after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  right: -20px;
  bottom: 0;
  background-image: radial-gradient(circle at 100% 0%, transparent 20px, #ff1493 21px);
}/*# sourceMappingURL=chcokcoco-various.css.map */